<template>
  <CloseOutlined style="cursor: pointer;float: right;" @click="handleClose" />
   <common-search :col-layout="{xxl: 6, xl:8, lg: 8, md: 12, sm: 24, xs: 24}" v-model="query" :formItems="formItems" @search="search" @reset="reset"></common-search>
   <div style="margin-bottom: 10px">
<!--     <a-button type="primary" @click="handleAdd">-->
<!--       <template #icon>-->
<!--         <PlusOutlined />-->
<!--       </template>-->
<!--       新增用户-->
<!--     </a-button>-->
     <a-button type="primary" @click="handleHas" style="margin-left: 10px">
       <template #icon>
         <MinusOutlined />
       </template>
       已有用户
     </a-button>
   </div>
  <my-alert :color="'info'" @onClearSelected="onClearSelected" :selectedRowKeys="selectedRowKeys"></my-alert>
  <common-table
       :columns="columns"
       :dataSource="list"
       v-model:localPagination="page"
       @paginationChange="onPageChange"
       :slots="['action','status']"
       :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
       v-model:loading="loading"
       :rowKey="(record) => record.id"
   >
    <template #status="{ record }">
      <span>{{record.status === 1 ? '正常' : '冻结'}}</span>
    </template>
     <template #action="{ record }">
       <more-btn-container>
         <a @click="editRole(record)">编辑</a>
         <a-popconfirm
             title="是否要删除该用户?"
             ok-text="是"
             cancel-text="否"
             @confirm="handleDelete(record.id)"
             @cancel="cancel"
         >
           <a>删除</a>
         </a-popconfirm>
       </more-btn-container>
     </template>
  </common-table>
  <add-user-drawer :openA="openA" @handleClose="closeAdd"></add-user-drawer>
  <edit-user-drawer v-if="openE"  :openE="openE" :item="item" @handleClose="handleCloseE"></edit-user-drawer>
  <userRole v-if="openHas" @close="closeHas" :open="openHas" :id="id"></userRole>
</template>
<script setup>
import CommonSearch from "@/components/commonSearch/index.vue";
import UserRole from "@/components/modal/userRole.vue";
import {useSearchTable} from "@/hooks/table/useSearchTable";
import {ref, computed} from "vue";
import {deleteUserRole, queryUserRoleList} from "@/api/system/user.js";
import MyAlert from "@/components/alert/my-alert.vue";
import CommonTable from "@/components/commonTable/index.vue";
import MoreBtnContainer from "@/components/moreBtnContainer/index.vue";
import useUserStore from "@/store/modules/user.js";
import AddUserDrawer from "@/components/drawer/addUserDrawer.vue";
import EditUserDrawer from "@/components/drawer/editUserDrawer.vue";
import dayjs from "dayjs";
import {message} from "ant-design-vue";
const props = defineProps({
  id:{
    type:Number,
  },
  fatherDataList:{
    type:Array,
    default:[]
  }
})
const user = useUserStore()
const emit = defineEmits(['close','changeList'])
const roleId = computed(() => props.id)
const openA = ref(false)
const openE = ref(false)
const openHas = ref(false)
const item = ref({})
const beforeSearch = () => {
  user.useSon = true
  query.value.roleId = roleId.value
}
const { dataList, query, loading, page, search, reset, onPageChange } = useSearchTable({
  searchAPI: queryUserRoleList,
  queryFactory: () => ({
    field:'id,,username,realname,status_dictText,action',
    column:'create_time',
    order:'desc'
  }),
  beforeSearch,
})
const list = computed(()=> {
    if(user.useSon){
      return dataList.value
    }else{
      return props.fatherDataList
    }
  }
)
const formItems = ref([
  {
    label: '用户账号',
    field: 'username',
    type: 'input'
  }
])
const columns =  [
  {
    title: '用户账号',
    align: 'center',
    dataIndex: 'username',
    width: 120
  },
  {
    title: '用户名称',
    align: 'center',
    width: 100,
    dataIndex: 'realname'
  },
  {
    title: '状态',
    align: 'center',
    width: 80,
    dataIndex: 'status'
  },

  {
    title: '操作',
    dataIndex: 'action',
    align: 'center',
    width: 120
  }
]
const selectedRowKeys = ref([])
const selectedRow = ref([])

/**
 * 选择变化
 * @param e
 * @param v
 */
const onSelectChange = (e,v) => {
  selectedRowKeys.value = e
  selectedRow.value = v
  console.log(selectedRow.value)
}
const onClearSelected = () => {
  selectedRowKeys.value = []
}
const handleClose = () => {
  emit('close')
}

const closeAdd = () => {
  openA.value = false
  reset()
}

const handleAdd = () => {
  openA.value = true
}

const editRole = (record) => {
  item.value = Object.assign({selectedroles:[],selecteddeparts:''}, record)
  item.value.post = item.value.post === "" ? [] : item.value.post
  if(item.value.birthday){
    item.value.birthday = dayjs(item.value.birthday)
  }
  openE.value = true
}

const handleCloseE = () => {
  openE.value = false
  reset()
}

const handleDelete = async (id) => {
  try{
    const res = await deleteUserRole('/sys/user/deleteUserRole',{roleId:roleId.value,userId:id})
      message.success(res.message)
      reset()
  }catch (e){
    message.error(e)
  }
}
const cancel = () => {}
const handleHas = () => {
  openHas.value = true
}
const closeHas =  async () => {
  openHas.value = false
  search()
}
defineExpose({
  queryUserRoleList
})
</script>

<style scoped>

</style>
